<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登/注</title>
    <link rel="stylesheet" href="/ast/layui/css/layui.css">
    <link rel="stylesheet" href="/ast/loreg.css">
    <link rel="icon" href="/ast/photo/favicon.ico" type="image/x-icon" />
    </head>
<body>
<div class="login-container">
    <header id="headery" class="site-title">登录</header>
    <div class="form-container">
        <div class="login-form">
            <input type="text" id="louser" name="account" placeholder="账号-Username" required>
            <input type="password" id="lopass" name="password" placeholder="密钥-Key" required>
            <button class="login-btn" onclick="logzc()">登录</button>
        </div>
        <div class="register-form" style="display: none;">
            <input type="text" name="account" id="zcuser" placeholder="账号-Username" required>
            <input type="password" name="password" id="zcpass" placeholder="密钥-Key" required>
            <div class="captcha-container">
        <input type="text" id="accoutcode"  name="yzm" placeholder="验证码" required class="captcha-input">
        <div onclick="createCode()" class="captcha-display"></div>
    </div>
    <input type="text" id="mail"  name="mail" placeholder="输入邮箱地址" required class="captcha-input">
    <input type="text" id="mail_code" style="display: none;" name="mail2" placeholder="输入邮箱验证码" required class="captcha-input">
    <button type="button" class="captcha-refresh-btn" id="getmail"  onclick="createmailCode()">获取邮箱验证码</button>
            <button class="register-btn" onclick="regzc()">注册</button>
        </div>
    </div>
    <div class="form-toggle">
        <button class="toggle-btn" data-target="login">登录</button>
        <button class="toggle-btn" data-target="register">注册</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script> 
<script>
const mailcode = Math.random().toString(36).substr(2, 6).toUpperCase(); 
document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.querySelector('.login-form');
    const registerForm = document.querySelector('.register-form');
    const toggleButtons = document.querySelectorAll('.form-toggle .toggle-btn');

    function switchForm(target) {
        if (target === 'login') {
            loginForm.style.display = 'block';
            registerForm.style.display = 'none';
            document.getElementById("headery").innerHTML="登录";
        } else {
            loginForm.style.display = 'none';
            document.getElementById("headery").innerHTML="注册";
            registerForm.style.display = 'block';
        }
    }

    toggleButtons.forEach(button => {
        button.addEventListener('click', function() {
            const target = this.getAttribute('data-target');
            switchForm(target);
            toggleButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    });
});
function createCode() {
    const code = Math.random().toString(36).substr(2, 6).toUpperCase(); 
    document.querySelector('.captcha-display').textContent = code;
}
function createmailCode() {
    var mail = document.getElementById("mail").value;
    var mailbu = document.getElementById("getmail");
    var mailcode_i = document.getElementById("mail_code");
    if(mail === ""){
        layer.msg('邮箱不能为空');
        return false;
}
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://v.api.aa1.cn/api/qqemail/new/?to='+mail+'&subject=注册验证码&message=注册验证码：'+mailcode+'&from_mail=1466416773@qq.com', true);
      xhr.send();
      layer.msg('验证码已发送至邮箱，请注意查收');
      mailbu.style.display = "none";
      mailcode_i.style.display = "block";
        }
document.addEventListener('DOMContentLoaded', function() {
    createCode(); 
});
function regzc(){
    var post_user = document.getElementById("zcuser").value;  
    var post_pass = document.getElementById("zcpass").value;  
    var accoutcode = document.getElementById("accoutcode").value; 
    var mailcode2 = document.getElementById("mail_code").value; 
    var mailz = document.getElementById("mail").value; 
    if(accoutcode != document.querySelector('.captcha-display').textContent){
        layer.msg("验证码错误");
        createCode();
        return false;
    }
    if(post_user === "" || post_pass === ""){
        layer.msg("账号或密码不能为空");
        createCode();
        return false;
    }
    if(mailcode2 === "" || mailcode2 != mailcode){
        layer.msg("邮箱验证码不能为空或错误");
        createCode();
        return false;
    }
    var encodedUser = encodeURIComponent(post_user);
    var encodedPass = encodeURIComponent(post_pass);
    var encodedmail = encodeURIComponent(mailz);
    var query = 'account=' + encodedUser + '&password=' + encodedPass+'&mail='+encodedmail;
    location = '/book/reg.php?' + query;
}
function logzc(){
    var post_userl = document.getElementById("louser").value;  
    var post_passl = document.getElementById("lopass").value;  
    if(post_userl === "" || post_passl === ""){
        alert("账号或密码不能为空");
        createCode();
        return false;
    }
    var encodedUserl = encodeURIComponent(post_userl);
    var encodedPassl = encodeURIComponent(post_passl);
    var query = 'account2=' + encodedUserl + '&password2=' + encodedPassl;
    location = '/book/log.php?' + query;
}
</script>
</body>
</html>